<template>
	<view class="container">
    <u-sticky>
      <view class="header" id='header'>
        <view class="btn-search">
          <u-search action-text="" :show-action="false" v-model="param.keyword" placeholder="请输入关键字"
                    :animation="true" @search="search()"></u-search>
          <u-button size="mini" :customStyle="btn" shape="circle" @click="search" type="primary">搜索
          </u-button>
        </view>
        <view class="date">
          <view class="time" @click="selectTime('start')">
            {{startDateShow?startDateShow : '开始时间'}}
          </view>
          <view class="date-center">
            至
          </view>
          <view class="time" @click="selectTime('end')">
            {{endDateShow?endDateShow : '结束时间'}}
          </view>
        </view>
      </view>
    </u-sticky>
		<view class="main"v-if="list.length > 0">
			<scroll-view scroll-y :style="[{height: height + 'px'}]" lower-threshold= "200" @scrolltolower="reachBottom" >
				<view class="card" v-for="item in list" :key = "item.id">
					<view class="left">
						<view class="line">
							<view class="data"># {{item.id}}</view>
						</view>
						<view class="line" v-if="item.deviceNo != null">
							<view class="title">设备码</view>
							<view class="data">{{item.deviceNo}}{{item.deviceTypeName != null ? '_'+item.deviceTypeName : ''}}{{item.alias != null ? '_'+ item.alias +'号机' : ''}}</view>
						</view>
						<view class="line">
							<view class="title">操作内容</view>
							<view class="data">{{item.remark}}</view>
						</view>
						<view class="line">
							<view class="title">操作时间</view>
							<view class="data">{{$date.dateFormatYMDHMS(item.createTime)}}</view>
						</view>
						<view class="line">
							<view class="title">操作人</view>
							<view class="data">{{item.userName}}</view>
						</view>
					</view>
					<view class="type t-success" style="color: #18B566;" v-if="item.status == 0">
						操作成功
					</view>
					<view class="type t-fail"  style="color: red;" v-if="item.status == 1">
						操作失败
					</view>
					<view class="badge" v-if="item.type == 1">设备绑定</view>
					<view class="badge" v-if="item.type == 2">设备解绑</view>
					<view class="badge" v-if="item.type == 3">绑定礼品</view>
					<view class="badge" v-if="item.type == 4">解绑礼品</view>
					<view class="badge" v-if="item.type == 7">子账号操作</view>
					<view class="badge" v-if="item.type == 8">场地操作</view>
					<view class="badge" v-if="item.type == 9">套餐操作</view>
					<view class="badge" v-if="item.type == 10">网卡购买</view>
					<view class="badge" v-if="item.type == 11">退款操作</view>
					<view class="badge" v-if="item.type == 12">黑名单操作</view>
					<view class="badge" v-if="item.type == 13">商品操作</view>
					<view class="badge" v-if="item.type == 14">商品类型操作</view>
				</view>
				<u-loadmore :status="status" :load-text="loadText" style="padding: 30rpx 0 70rpx 0;"/>
			</scroll-view>
		</view>
		<u-empty text='暂无操作日志' mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
		<!-- 开始时间 -->
		<u-datetime-picker ref="starttimePicker" :show="starttimePickerShow" v-model="param.startDate" :value="param.startDate" mode="datetime"
			:formatter="formatter" @confirm="confirm" @cancel="starttimePickerShow = false"></u-datetime-picker>
		<!-- 结束时间 -->
		<u-datetime-picker ref="endtimePicker" :show="endtimePickerShow" v-model="param.endDate" :value="param.endDate" mode="datetime"
			:formatter="formatter" @confirm="confirm" @cancel="endtimePickerShow = false"></u-datetime-picker>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				btn: {
					width: '100rpx',
					color: '#fff',
					marginLeft: '20rpx'
				},
				timeStr: '',
				height: 0,
				param: {
					startDate: '',
					endDate: '',
					keyword: '',
					pageNum: 1,
				},
				startDateShow: '',
				endDateShow: '',
				// 显示用
				starttimePickerShow: false,
				endtimePickerShow: false,
				status: 'loadmore',
				loadText: {
					loadmore: '轻轻上拉加载',
					loading: '稍等一会,正在努力为您加载...',
					nomore: '没有更多了'
				},
				list:[]
			}
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.starttimePicker.setFormatter(this.formatter)
			this.$refs.endtimePicker.setFormatter(this.formatter)
		},
		onLoad() {
			this.startDateShow = uni.$u.timeFormat(this.$date.getStartDate(), 'yyyy-mm-dd hh:MM:ss');
			this.endDateShow = uni.$u.timeFormat(this.$date.getEndDate(), 'yyyy-mm-dd hh:MM:ss');
			this.param.startDate = this.$date.getStartDate()
			this.param.endDate = this.$date.getEndDate()
			this.findData()
		},
		mounted(){
			const query = uni.createSelectorQuery().in(this);
			query.select('#header').boundingClientRect(data => {
			    this.height = uni.getSystemInfoSync().windowHeight - data.height;
			}).exec();
			this.height = this.height - 20;
			console.log(this.height);
		},
		methods: {
			findData(){
				uni.showLoading({
					title:'请稍等...',
					mask:true
				})	
				console.log(this.param,"数据")
				 this.$api('logManipulate.list',this.param).then(res => {
					 uni.hideLoading();
					 uni.stopPullDownRefresh();
					if(res.data != null){
						this.list.push(...res.data.list)
						this.param.pageNum = res.data.pageNum;
						if(this.param.pageNum >= res.data.pages){
							this.status = 'nomore';
							return;
						}
					}
				})
			},
			search() {
				this.list = [];
				this.param.pageNum = 1;
				this.status = 'loadmore';
				this.findData()
			},
			selectTime(str) {
				this.timeStr = str;
				if(str == 'start'){
					this.starttimePickerShow = true;
				}else if(str == 'end'){
					this.endtimePickerShow = true;
				}
			},
			confirm(e){
				if(this.timeStr === 'start'){
					this.param.startDate = e.value
					console.log(e,"eeeee")
					this.startDateShow = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
					this.starttimePickerShow = false;
				}else if(this.timeStr === 'end'){
					this.param.endDate = e.value
					this.endDateShow = uni.$u.timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
					this.endtimePickerShow = false;
				}
			
				if(this.param.startDate != null && this.param.endDate != null){
					this.search();
				}
			},
			reachBottom(){
				console.log("-------------下拉加载--------------")
				if(this.status == 'nomore'){
					return;
				}
				this.status = 'loading';
				// 使用延迟实现加载动画效果
				setTimeout(() => {
					this.param.pageNum = ++ this.param.pageNum;
					this.findData();
					this.status = 'loadmore';
				}, 2000)
			},
			formatter(type, value) {
				if (type === 'year') return `${value}年`
				if (type === 'month') return `${value}月`
				if (type === 'day') return `${value}日`
				if (type === 'hour')return `${value}时`
				if (type === 'minute') return `${value}分`
				return value
			},
		}
	}
</script>

<style lang="scss">
	.container {
		.header {
			background-color: white;
			padding: $u-padding-medium;

			.btn-search {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.date {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: $u-padding-medium 0;
				margin-top: $u-margin-medium;

				.time {
					width: 325rpx;
					text-align: center;
					background-color: $u-bg-color;
					padding: $u-padding-medium;
					border-radius: 20rpx;
					color: $u-content-color;
					font-size: $uni-font-size-base - 2;
				}

				.date-center {
					color: $u-light-color;
					padding: 0 20rpx;
				}
			}
		}
		.main {
			padding: $u-padding-medium;
			.card {
				position: relative;
				padding: $u-padding-medium;
				background-color: white;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-radius: 20rpx;
				margin-bottom: $u-margin-medium;
				font-size: $f-base;
				.left {
					flex: 4;
					.line {
						display: flex;
						justify-content: space-between;
						margin: $u-margin-mini 0;
						.title {
							color: $u-content-color;
							width: 150rpx;
						}
			
						.data {
							flex: 1;
							color: $u-tips-color;
						}
					}
			
				}
			
				.type {
					flex: 1;
					display: flex;
					justify-content: flex-end;
					font-weight: bold;
				}

        .t-success {
          color: #07D5B0;
        }

        .t-fail {
          color: #FE404C;
        }

        .badge {
					position: absolute;
					top: 0;
					right: 0;
					color: white;
					padding: 10rpx 15rpx;
					border-radius: 0 20rpx  0 20rpx;
					background-color: $u-primary;
					font-size: 24rpx;
				}
			}
		}
	}
</style>
